<template>
  <div class="body">
    <el-dialog
        title="添加评论"
        :visible.sync="dialogVisible"
        width="50%">
      <span>
        <el-input v-model="newComment">

        </el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addComment">确 定</el-button>
      </span>
    </el-dialog>

    <div class="header">
      <div class="title">
        评论区
      </div>
      <div class="add">
        <ElButton @click="dialogVisible=true">添加评论</ElButton>
      </div>
    </div>

    <div v-for="item in list" v-bind:key="item.name" class="item">
      <el-card class="box-card" style="background: transparent">
        <div slot="header" class="clearfix">
          <span>{{item.owner_id}}</span>
          <el-button style="float: right;
          padding: 3px 0" @click="delComment(item.id)" type="text">删除评论</el-button>
        </div>
        <div class="text item">
          {{item.text}}
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "Comment",
  data(){
    return{
      list:null,
      dialogVisible: false,
      newComment: ""
    }
  },
  methods:{
    addComment: function (){
      this.axios.get("/comment/add",{params:{
          "token": sessionStorage.getItem("token"),
          "owner_id": sessionStorage.getItem("name"),
          "text": this.newComment,
          "article_id":  this.$route.query.id
        }
      }).then(res => {
            res = res.data
            if (res.code === 200){
              this.$message({
                message: 'success',
                type: 'success'
              })
              location.reload()
            } else {
              this.$message({
                message: "code: " + res.code + " msg: " + res.msg,
                type: 'warning'
              })
              console.log("code:", res.code,"msg: ",res.msg)
            }
          })
      this.dialogVisible = false
    },
    delComment: function (id){
      console.log(id)
      this.axios.get("/comment/del",{params:{
          "token": sessionStorage.getItem("token"),
          "id":  id
        }
      }).then(res => {
        res = res.data
        if (res.code === 200){
          this.$message({
            message: 'success',
            type: 'success'
          })
          location.reload()
        } else {
          this.$message({
            message: "code: " + res.code + " msg: " + res.msg,
            type: 'warning'
          })
          console.log("code:", res.code,"msg: ",res.msg)
        }
      })
    }
  },
  created() {
    this.axios.get("/comment/get_comment_by_article",{params:{
        "token": sessionStorage.getItem("token"),
        "article_id":  this.$route.query.id
      }
    })
    .then(res => {
      res = res.data
      this.list = res.data.list
    })
  }
}
</script>

<style scoped lang="scss">
  .body{
    width: 100%;
    display: flex;
    flex-direction: column;

    margin-bottom: 100px;

    .item{
      margin-top: 20px;
      margin-bottom: 40px;
      width: 100%;

    }
  }

  .header{
    border-top: 2px solid gray;

    padding-left: 100px;
    padding-right: 50px;

    display: flex;
    flex-direction: row;
    justify-content: space-between;

    height: 60px;
    line-height: 60px;

    .title{
      font-size: 20px;
      alignment: center;
    }

    .add{
      float: right;
    }
  }
</style>